<template>
  <div class="other-bg">

    <van-nav-bar
        title="上报事件"
        left-text="返回"
        left-arrow
        :safe-area-inset-top="true"
        @click-left="onClickLeft"
    />
    <van-row class="backg">
      <van-col span="24" class="title-column">
        <van-image class="title-img" width="10" height="12" :src="require('@/assets/img/column-icon.png')" />
        事件地点
      </van-col>

      <van-col span="24">
        <van-cell-group class="backg-c-border">
          <van-field
              readonly
              clickable
              name="pickers"
              :value="value"
              label="事件类型"
              placeholder="选择事件类型"
              @click="showPicker = true"
              input-align="right"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="columns"
                @confirm="onConfirmss"
                @cancel="showPicker = false"
            />
          </van-popup>
          <van-cell title="所属辖区" value="请输入所属辖区" ><input type="text" style="border:none;" v-model="deptName"></van-cell>
          <van-cell title="事件地点" value="根据地图" ><input type="text" style="border:none;" v-model="eventAddress"></van-cell>

        </van-cell-group>
      </van-col>


    </van-row>

    <van-row class="backg">
      <van-col span="24" class="title-column">
        <van-image class="title-img" width="10" height="12" :src="require('@/assets/img/column-icon.png')" />
        关联对象
      </van-col>

      <van-col span="24">
        <van-cell-group class="backg-c-border">
          <van-field
              readonly
              clickable
              name="picker"
              :value="values"
              label="选择对象"
              placeholder="关联对象(选择)"
              @click="showPickers = true"
              input-align="right"
          />
          <van-popup v-model="showPickers" position="bottom"  >
            <van-picker
                show-toolbar
                :columns="columnss"
                @confirm="onConfirms"

                @cancel="showPickers = false"
            />
          </van-popup>
          <van-cell title="事件名称" value="此栏目根据事件变化" ><input type="text" style="border:none;" v-model="eventTitle"></van-cell>
        </van-cell-group>
      </van-col>

    </van-row>

    <van-row class="backg bottom-mt">
      <van-col span="24" class="title-column">
        <van-image class="title-img" width="10" height="12" :src="require('@/assets/img/column-icon.png')" />
        事件信息
      </van-col>

      <van-col span="24" class="backg-c event">
        <van-col span="24">
          <van-col span="24" class="font-14">取证记录</van-col>

          <van-col span="24">
            <div
                class="posting-uploader-item"
                v-for="(item, nn) in postData"
                :key="nn"
            >
              <img
                  :src="item.content"
                  alt="图片"
                  class="imgPreview"
                  width="75px"
                  height="75px"
              />
              <van-icon name="close" @click="delImg(nn)" class="delte" />
            </div>
            <van-uploader
                :after-read="afterRead"
                :accept="'image/*'"
                v-show="postData.length <= 4"
            >
            </van-uploader>
          </van-col>


        </van-col>

        <van-col span="24">
          <van-col span="12" class="font-14 van-button--plain">上报意见</van-col>
          <van-col span="12" class="font-12 arrow-fr">
            <van-button type="info" size="small"  @click="showPopup">快捷上报意见</van-button>
          </van-col>

          <!--选择弹出位置-->
          <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
            <van-col span="24" class="font-14 van-button--plain" @click="showflasePopup('沟通协商')">沟通协商</van-col>
            <van-col span="24" class="font-14 van-button--plain" @click="showflasePopup('出警整治')">出警整治</van-col>
            <van-col span="24" class="font-14 van-button--plain" @click="showflasePopup('派人维护')">派人维护</van-col>
            <van-col span="24" class="font-14 van-button--plain" @click="showflasePopup('电话通知')">电话通知</van-col>
          </van-popup>

          <van-col span="24">
            <van-field
                class="Textfield"
                v-model="message"
                rows="3"
                autosize
                type="textarea"
                maxlength="150"
                placeholder="请填写事件情况"
                show-word-limit
            />
          </van-col>
          <van-col span="24">

              <van-button class="van-button--plain" type="info" @click="sumint" block>提交</van-button>

          </van-col>
        </van-col>
      </van-col>
    </van-row>
  </div>

</template>

<script>
 
import {Toast} from "vant";

export default {
  data() {
   
    return {
      deptName:localStorage.getItem("deptName"),
      regionIndexCode: "",
      regionName: "",
      eventIndexCode: "",
      eventTitle: "",
      eventAddress:"",
      eventType:"",
      eventTypeName:"",
      eventAlertStatus:"",
      reportType:"",
      reportTypeName:"",
      postData: [],
      onConfirm:'',
      show:false,
      value: '',
      values:'',
      message:'',
      columns: ['消防通道违规占用', '垃圾堆积', '出店经营', '沿街晾晒', '机动车违停','人员聚集','长时间不出门'],
      columnss:['违规停车1', '违规停车2', '违规停车3', '违规停车4', '违规停车5'],
      showPicker: false,
      showPickers:false,
      dates:"",
    };
  },
  created(){
    console.log("uuid");
    console.log(localStorage.getItem("uuid"));
  },
  methods:{
     delImg(index) {
       // 删除指定下标的图片对象
       if (isNaN(index) || index >= this.postData.length) {
         return false;
       }
       let tmp = [];
       for (let i = 0, len = this.postData.length; i < len; i++) {
         if (this.postData[i] !== this.postData[index]) {
           tmp.push(this.postData[i]);
         }
       }
       this.postData = tmp;
     },
     afterRead(file) {
       // 此时可以自行将文件上传至服务器
       // console.log(file);
       // console.log(file.file);
       this.postData.push(file); // postData是一个数组
     },
     onClickLeft(){
       this.$router.go(-1);
     },
     onConfirms(values) {
       this.values = values;

       this.showPickers=false;
     },
     showPopup(){
       this.show = true;
     },
     showflasePopup(optin){
       console.log(optin);
       this.show = false;
       this.message=optin;
     },
     onConfirmss(values) {
       this.value = values;
       this.showPicker = false;
     },
     sumint(){
       var Content="";
       for (let i = 0, len = this.postData.length; i < len; i++) {
         let imgbase64 = this.postData[i].content.replace(
             /^data:image\/\w+;base64,/,
             ""
         );
         if (i != 0) {
           Content += ",";
         }
         Content += imgbase64;
       }

       var types="";
       if (this.value=="机动车违停"){
         types="spi"
       }
       if (this.value=="非机动车违停"){
         types="spi"
       }
       if (this.value=="游商摊贩"){
         types="spi"
       }
       if (this.value=="人员聚集"){
         types="spi"
       }
       if (this.value=="出店经营"){
         types="ocos"
       }
       if (this.value=="沿街晾晒"){
         types="ocos"
       }
       if (this.value=="违规宣传物"){
         types="ocos"
       }
       if (this.value=="垃圾堆积"){
         types="ocos"
       }
       if (this.value=="消防通道违规占用"){
         types="spi"
       }

       console.log("typs的值:")
       console.log(types)
       var eventInfo = {
         event:{
           eventIndexCode:"",
           eventTitle:this.eventTitle,
           eventAddress:this.eventAddress,
           reportTime:new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/" + new Date().getDate()+" "+(new Date().getHours()+1)+":"+(new Date().getMinutes()+1)+":"+(new Date().getSeconds()+1),
           eventType:"",
           eventTypeName:this.value,
           eventImage:Content,
           eventThumbnailImage:Content,
           eventAlertStatus:"",
           eventUpdateTime:"",
           lawEnforcementType:"",
           lawEnforcementTypeName:"",
           storageId:"2f9714c5-c4cf-4148-acf7-a8420641dbec",
           cameraIndexCode:"",
           cameraName:this.eventAddress,
           riskLevel:"",
           currentProcessorId:localStorage.getItem("userId"),
           currentProcessorName:localStorage.getItem("userName"),
           reportType:"2",
           reportTypeName:"人工上报",
           componentid:types,
         },
         reportProvider:{

         },
         point:{

         },
         placeName:"123",
         regionIndexCode:localStorage.getItem("uuid"),
         regionName:localStorage.getItem("deptName"),
       };
       Toast.loading({
         message: '正在提交...',
         forbidClick: true,
       });
       this.$http
           .post("http://139.224.226.216:8083/appEventInfo/addReportEvent", eventInfo)
           .then((res) => {
             console.log(res);
             if (res.data.code == 0) {
               if (res.data.msg == "添加成功") {
                 this.$router.push("/Success");
               } else {
                 Toast(res.data.msg);
               }
             } else {
               Toast.fail("提交失败！");
             }
           })
           .catch((err) => {
             Toast("网络错误" + err);
           });
     },


   }
};
</script>

<style scoped>


</style>